<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS_盒子模型</title>
	<link rel="stylesheet" href="style.css">
	<style>
		/*
			CSS重置
			CSS重置是让浏览器内核根据自己定义的规则,按照自己制定的标准去解析页面的所有元素.
			优点:由于不同的浏览内核解析的标准是不一致的.
				自己定义的CSS重置就可以避免浏览器不同,访问页面产生页面的效果不同.
			缺点:浏览器解析HTML文档前,需要先加载自定义的CSS重置.相对来说,就需要消耗一部分时间.
				还有一些特定的元素是CSS重置后,并不能完全实现统一展示效果的.
		*/
		*{margin:0;padding:0;}
		/*.div{border-color:red;border-style: solid;border-width: 2px;}*/

		/*#div1{margin-bottom:100px;}*/
		/*#div2{margin-top:200px;}*/


        #div1{background-color: red; height: 200px;}
        #div2{background-color: black; height: 200px;}

		#div3{border:1px solid red;}

		#div3 * {border:1px solid green;}
		#div3 h1{

			/**height == line-height  这种情况下,文字是上下高度居中*/
			height: 140px;
			line-height:140px;
			/**text-align: 实现  居左   居中   居右 -*/
			text-align: center;
			font: italic bold 40px "华文彩云" ;
		}

		#div4{ border:1px solid red; width: 200px;height: 100px;
			margin: 0 0 300px 0;
			/**内边距的调整会影响盒子模型的整体高度.
				撑开盒子.一般情况下,不建议使用内边距来调整内容.
			*/
			padding: 100px 0 0 0 ;
		}
		#div5{ width: 100px; height: 100px; background-color: blue;}
	</style>
</head>
<body>
	<div id="div4">
		<div id="div5"></div>
	</div>
<hr>
	<div class="div" id="div1"></div>
	<div class="div" id="div2"></div>

	<hr>
	<div id="div3">
		<h1>this is a h1</h1>
		<p> this is a p </p>
	</div>



</body>
</html>